import React, { Suspense, lazy } from 'react'
import './App.css'
import { RouterProvider } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store';
import { router } from './router/index'
import { useRenderPerformance } from './hooks/usePerformance'

// 懒加载错误边界组件
const ErrorBoundary = lazy(() => import('./compontent/ErrorBoundary'))

// 加载中组件
const LoadingFallback = () => (
  <div style={{
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    fontSize: '16px',
    color: '#666'
  }}>
    <div className="loading-spinner">
      <div className="spinner"></div>
      <span>应用加载中...</span>
    </div>
  </div>
)

function App() {
  // 性能监控
  useRenderPerformance('App')

  return (
    <Provider store={store}>
      <PersistGate loading={<LoadingFallback />} persistor={persistor}>
        <Suspense fallback={<LoadingFallback />}>
          <ErrorBoundary>
            <RouterProvider router={router} />
          </ErrorBoundary>
        </Suspense>
      </PersistGate>
    </Provider>
  )
}

export default App
